<template>
  <view :class="['message-item', 'u-flex-y-center',border?'is_border':'']"
    @click="$u.route(`/pages/houseMessage/messageDetail?chat_id=${item.userProfile.userID}&chat_name=${item.userProfile.nick}`)">
    <u-image :src="prefixURL(item.userProfile.avatar) || '/static/images/04_w.png'" width="88rpx" height="88rpx"
      radius="8rpx" customStyle="margin-right:12rpx">
    </u-image>
    <view class="u-flex-1 u-flex-column u-flex-between">
      <view class="u-flex-y-center">
        <view class="u-flex-y-center">
          <view class="u-m-r-10">{{item.userProfile.nick}}</view>
        </view>
        <u-text :text="timeFormat(item.lastMessage.lastTime,'yyyy-mm-dd')" align="right" color="#666"
          size="12"></u-text>
      </view>
      <u-text :text="item.lastMessage.payload.text" color="#666" size="12"></u-text>
    </view>
  </view>
</template>

<script setup>
  import { timeFormat } from 'uview-plus';
  import { prefixURL } from '../../../util/util';
  const porps = defineProps({
    border: {
      type: Boolean,
      default: true
    },
    item: {
      type: Object,
      default: () => {}
    }
  })
</script>

<style lang="scss" scoped>
  .message-item {
    padding: 24rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    color: #000;

    .message-avatar {
      width: 88rpx;
      height: 88rpx;
      border-radius: 8rpx;
      margin-right: 12rpx;
    }
  }

  .is_border {
    border-top: 1px solid rgba(0, 0, 0, .12);
  }
</style>